import "./wdyr";
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import './index.css';
import 'antd/dist/antd.css';
import App from './App';
import Counter from './Counter';
import Counter2 from './Counter2';
import BookablesList from './BookablesList';
import reportWebVitals from './reportWebVitals';
// import 'virtual:windi.css'
import { Provider } from "react-redux";
import { store } from "./store/store";
import ErrorBoundary from "./ErrorBoundary";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <ErrorBoundary
      fallback={
      <Fragment>
        <h1>Something went wrong!</h1>
        <p>Try reloading the page.</p>
      </Fragment>
      }
     >
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<App />} />
            <Route path="/couter/:id" element={<Counter />} />
            <Route path="/couter2" element={<Counter2 />} />
            <Route path="/booklist" element={<BookablesList />} />
          </Routes>
        </BrowserRouter>
      </ErrorBoundary>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
